<template>
  <div id="userInfo">
    <p>用户名：{{form.username}}</p><br>
    <p><span style="vertical-align: top;">头像：</span><img :src="form.userImg" alt=""></p><br>
    <el-upload class="upload-demo" ref="upload" action="" :on-change='uploadChange' style="width: 400px; text-align: center"
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" list-type="picture-card" :auto-upload="false" :limit='1'>
      <i class="el-icon-plus"></i>
      <div slot="tip" class="el-upload__tip">点击修改头像</div>
    </el-upload><br>
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <!-- <el-form-item label="电话号码：">
        <el-input v-model="form.phonenum"></el-input>
      </el-form-item> -->
      <p>电话号码：&nbsp;&nbsp;{{form.phonenum}}</p><br>
      <el-form-item label="真实姓名：">
        <el-input v-model="form.realName"></el-input>
      </el-form-item>
      <el-form-item label="专业班级：">
        <el-input v-model="form.clazz"></el-input>
      </el-form-item>
      <el-form-item label="学号：">
        <el-input v-model="form.son"></el-input>
      </el-form-item>
      <el-form-item label="住址：">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio-group v-model="form.gender">
          <el-radio label="m">男</el-radio>
          <el-radio label="f">女</el-radio>
          <el-radio label="n">保密</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="支付密码：" prop='paymentPassword'>
        <el-input v-model="form.paymentPassword" type='password' show-password></el-input>
      </el-form-item>
    </el-form>
    <p>钱包余额：{{form.walletBalance}}</p><br>
    <el-button type="primary" plain @click="saveClick">保存</el-button>
  </div>
</template>

<script>
// import axios from 'axios'
import {request} from '@/network/request'

// 定义函数判断是否为格式正确的6位支付密码
function isValidPayPassword(str) {
  const reg = /^\d{6}$/
  return reg.test(str)
}

// 支付密码验证器所需函数
function validPayPassword(rule, value, callback) {
  if(!value) {
    callback(new Error('请输入支付密码'))
  } else if(!isValidPayPassword(value)) {
    callback(new Error('请输入6位数字支付密码'))
  } else {
    callback()
  }
}

export default {
  data() {
    return {
      form: {
        username: '',
        phonenum: '',
        walletBalance: '',
        realName: '',
        clazz: '',
        son: '',
        address: '',
        gender: '',
        paymentPassword: '',
        userImg: '',
        gmtCreate: '',
        gmtModified: ''
      },
      rules: {
        paymentPassword: [
          { trigger: 'change', validator: validPayPassword }
        ]
      }
    }
  },
  computed: {
    userId() {
      return this.$store.state.userId
    }
  },
    // infoClick() {
      // axios.get('http://192.168.43.152:8555/xiaoyi/user/userInfo/' + userId, {
        // params: {
        //   userId: 1
        // }
      // }).then(res => {
        // console.log(res);
      // })
    // }
  mounted() {
    request({
      url: `/user/userInfo/${this.userId}`,
      method: 'get'
    }).then(res => {
      if(res.data.flag) {
        // console.log(res);
        this.form.username = res.data.data.items.username
        this.form.phonenum = res.data.data.items.phonenum
        this.form.walletBalance = res.data.data.items.walletBalance
        this.form.realName = res.data.data.items.realName
        this.form.clazz = res.data.data.items.clazz
        this.form.son = res.data.data.items.son
        this.form.address = res.data.data.items.address
        this.form.gender = res.data.data.items.gender
        this.form.userImg = res.data.data.items.userImg
        this.form.gmtCreate = res.data.data.items.gmtCreate
        this.form.gmtModified = res.data.data.items.gmtModified
        this.form.paymentPassword = res.data.data.items.paymentPassword
      }
    }).catch(err => {
      console.log(err);
    });
  },
  methods: {
    // 点击保存按钮，保存用户个人信息，将新的个人信息发给服务器
    saveClick() {
      let user = JSON.stringify({
        realName: this.form.realName,
        clazz: this.form.clazz,
        son: this.form.son,
        address: this.form.address,
        gender: this.form.gender,
        paymentPassword: this.form.paymentPassword,
        userImg: this.form.userImg,
        userId: this.$store.state.userId
      })
      request({
        url: '/user/addUserInfo',
        method: 'put',
        data: user
      }).then(res => {
        // console.log(res);
        if(res.data.flag) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
        }
        this.$store.commit('changeUserImg', this.form.userImg)
      }).catch(err => {
        console.log(err);
      })
    },
    uploadChange(file) {
      // 获取到上传文件的文件对象
      let fileObj = file.raw
      if(!/image\/\w+/.test(fileObj.type)) { 
        alert("请确保文件为图像类型"); 
        return false; 
      }
      let reader = new FileReader();
      reader.readAsDataURL(fileObj);
      let _this = this
      // 将得到的base64字符串保存到userImg
      reader.onload = function() {
        _this.form.userImg = reader.result
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
  }
}
</script>

<style scoped>
  #userInfo {
    width: 60%;
    /* margin: 0 auto; */
    padding: 20px 0;
    margin-left: 10%;
  }

  #userInfo p {
    font-size: 15px;
    color: #606266;
    margin-left: 17px;
  }

  #userInfo img {
    width: 80px;
    height: 80px;
  }

  #userInfo .el-input {
    width: 300px;
  }

  #userInfo .el-button {
    margin-left: 25%;
  }
</style>